<template>
    <div>
        <h4 class="font-weight-bold">
            <span class="text-muted font-weight-light">风控工具 / 打分卡 /</span> 新建打分卡
        </h4>

        <!-- 新增/编辑指标项 -->
        <Modal
            :closable="false"
            :mask-closable="false"
            v-model="scoreIndicatorFormShow"
            title="设置指标项"
            :loading="formLoading">

            <Form :model="scoreIndicatorForm" label-position="top">
                <FormItem label="指标项名称">
                    <i-input v-model="scoreIndicatorForm.name" placeholder="请输入风控指标项的名称"/>
                </FormItem>
                <FormItem label="是否启用" >
                    <i-switch size="large" v-model="scoreCard.enable">
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                    </i-switch>
                </FormItem>
            </Form>

            <div slot="footer">
                <Button 
                    type="primary" class="mr-2" 
                    @click="saveScoreIndicator" 
                    :loading="formLoading">确定</Button>
                <Button type="ghost"  
                    @click="hideScoreIndicatorModal">取消</Button>
            </div>
        </Modal>
        
        <div class="row">
            <div class="col-sm-6 col-xl-6">
                <b-card header="打分卡基础设置" header-tag="h6" class="mb-1">
                    <b-card-body style="padding: 0">
                        <b-form>
                            <b-form-group horizontal :label-cols="3" class="mb-2">
                                <div slot="label" class="text-sm-right pr-sm-2">打分卡名称</div>
                                <b-input v-model="scoreCard.name" type="text" placeholder="打分卡名称" />
                            </b-form-group>
                            <b-form-group horizontal :label-cols="3" class="mb-2">
                                <div slot="label" class="text-sm-right pr-sm-2">应用对象</div>
                                <Select v-model="scoreCard.riskObjectType">
                                    <Option 
                                        v-for="applyObject in applyObjectList" 
                                        :value="applyObject.udcValue" 
                                        :key="applyObject.udcValue">
                                        {{applyObject.udcValueDesc}}
                                    </Option>
                                </Select>
                            </b-form-group>
                            <b-form-group horizontal :label-cols="3" class="mb-2">
                                <div slot="label" class="text-sm-right pr-sm-2">基本分数</div>
                                <InputNumber v-model="scoreCard.baseScore" placeholder="基本分数"></InputNumber>
                            </b-form-group>
                            <b-form-group horizontal :label-cols="3" class="mb-2">
                                <div slot="label" class="text-sm-right pr-sm-2">备注</div>
                                <Input v-model="scoreCard.remark" placeholder="请输入打分卡的备注信息" :rows=4 type="textarea"/>
                            </b-form-group>
                            <b-form-group horizontal :label-cols="3" label-class="pt-sm-0" class="mb-2">
                                <div slot="label" class="text-sm-right pr-sm-2">是否启用</div>
                                <i-switch size="large" v-model="scoreCard.enable">
                                    <span slot="open">开启</span>
                                    <span slot="close">关闭</span>
                                </i-switch>
                            </b-form-group>
                            <b-form-group horizontal :label-cols="3" label-class="pt-sm-0" class="mb-2">
                                <div slot="label" class="text-sm-right pr-sm-2">是否启用消息</div>
                                <i-switch size="large" v-model="scoreCard.enableMessage">
                                    <span slot="open">开启</span>
                                    <span slot="close">关闭</span>
                                </i-switch>
                            </b-form-group>
                            <b-form-group horizontal :label-cols="3" class="mb-2">
                                <div slot="label" class="text-sm-right pr-sm-2">消息阈值</div>
                                <InputNumber v-model="scoreCard.messageThreshold" placeholder="消息阈值"></InputNumber>
                            </b-form-group>
                            <b-form-group horizontal :label-cols="3" class="mb-2">
                                <div slot="label" class="text-sm-right pr-sm-2">消息标题</div>
                                <Input type="textarea" :rows="4" placeholder="请定义消息标题，变量用两个#包含表示" v-model="scoreCard.messageTitle"></Input>
                            </b-form-group>
                            <b-form-group horizontal :label-cols="3" class="mb-2">
                                <div slot="label" class="text-sm-right pr-sm-2">消息级别</div>
                                <Select v-model="scoreCard.messageLevel">
                                    <Option 
                                        v-for="msgLevel in messageLevelList" 
                                        :value="msgLevel.value" 
                                        :key="msgLevel.value">
                                        {{msgLevel.label}}
                                    </Option>
                                </Select>
                            </b-form-group>

                            <b-form-row>
                                <div class="col-sm-12 ml-sm-auto text-center">
                                    <Button type="success" icon="checkmark-round"
                                     shape="circle" @click="saveScoreCard"
                                     :loading="saveLoading">保存</Button>
                                </div>
                            </b-form-row>
                        </b-form>
                    </b-card-body>
                </b-card>
            </div>
            <div class="col-sm-6 col-xl-6">
                <b-card no-body class="mb-4">
                    <b-card-header class="with-elements">
                        <span  class="card-header-title mr-2">指标项列表</span>
                        <div class="card-header-elements  ml-md-auto">
                            <Button type="text" size="small"  :disabled="!isSave" icon="plus" title="新增指标项"   @click="openScoreIndicatorModal"></Button>
                        </div>
                    </b-card-header>               
                    <b-card-body>
                        <sky-table :data="table.data" :columns="table.columns" :show-index="table.showIndex" :show-pagination="false" class="mt-0"></sky-table>
                        <p class="mt-3">
                            <Button size="small" type="ghost"  :disabled="!isSave" icon="plus-round"   @click="openScoreIndicatorModal">新增指标项</Button>
                        </p>
                    </b-card-body>
                </b-card>
            </div>
        </div>
    </div>
</template>

<style scoped>
</style>

<script>
export default {
    name: "RiskToolScorecardAdd",
    metaInfo: {
        title: "风控工具 - 新建打分卡"
    },
    components: {},
    data() {
        return {
            oid: null,
            isSave: false,
            saveLoading: false,
            scoreCard: { 
                name: '',   //打分卡名称，必填
                riskObjectType: '',   //风控对象code，必填
                baseScore: 0,   //基础分数，非必填
                enable: false,  //是否启用，必填
                remark: '', //备注，非必填
                enableMessage: true,   //是否开启消息
                messageThreshold: 0,    //消息阈值，非必填
                messageTitle: '##runtime.Date##执行打分卡001得分##runtime.Result##,低于预警线300',   //消息标题
                messageLevel: 1    //消息级别
            },
            applyObjectList:[],//风控对象主体 
            messageLevelList: [
                {
                    label: '高',
                    value: 1
                },
                {
                    label: '中',
                    value: 2
                },
                {
                    label: '低',
                    value: 3
                }
            ],
            table: {
                oid: null,
                showIndex: false,
                data: [],
                columns: [
                    {
                        title: "指标项名称",
                        key: "name"
                    },
                    {
                        //<b-btn variant="outline-success borderless icon-btn" class="btn-xs" @click.prevent="edit(props.row)"><i class="ion ion-md-create"></i></b-btn>
                        title: "操作",
                        width: 200,
                        align: "center",
                        render: (h, params) => {
                            let vm = this;
                            // console.log(params.row.isEnable)
                            return (
                                <div>
                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-2"
                                        shape="circle"
                                        icon="ios-eye"
                                        title="查看"
                                        onClick={() => {
                                            return vm.edit(params);
                                        }}
                                    />
                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-2"
                                        shape="circle"
                                        icon="edit"
                                        title="编辑指标项"
                                        onClick={() => {
                                            return vm.edit(params);
                                        }}
                                    />
                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-2"
                                        shape="circle"
                                        icon="wrench"
                                        title="设置打分卡"
                                        onClick={() => {
                                            return vm.edit(params);
                                        }}
                                    />
                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-2"
                                        shape="circle"
                                        icon="trash-b"
                                        title="删除"
                                        onClick={() => {
                                            return vm.remove(params);
                                        }}
                                    />
                                </div>
                            );
                        }
                    }
                ]
            },
            formLoading: false,  //加载中
            scoreIndicatorFormShow: false,
            scoreIndicatorForm: {
                name: '',   //指标项名称
                enable: false,   //指标项是否启用
                scoreCardOid: this.oid, //所属的打分卡
            }
        };
    },
    methods: {
        openScoreIndicatorModal(scoreIndicator){
            let self = this;

            if(scoreIndicator){
                self.scoreIndicatorForm = {
                    name: scoreIndicator.name,
                    enable: scoreIndicator.enable
                }
            }else{
                self.scoreIndicatorForm = {
                    name: '',
                    enable: false,
                    formLoading: false, 
                    scoreCardOid: self.oid
                }
            }

            self.scoreIndicatorFormShow = true;
        },
        saveScoreIndicator(){
            let self = this;

            self.formLoading = true;

            //Boolean转int
            let param = Object.assign({},self.scoreIndicatorForm);
            param.enable = param.enable?1:0;
            param.scoreCardOid = self.oid;

            self.$http
            .post('/app/v1/riskTool/scoreIndicators',param)
            .then((res) => {
                self.formLoading = false;
                
                if(res.code === 0){
                    self.$Notice.success({
                        title: '系统提示',
                        desc: res.desc
                    });
                    //设置表单状态
                    self.scoreIndicatorFormShow = false;

                    self.loadScoreIndicatorList();
                }else{
                    self.$Notice.error({
                        title: '系统提示',
                        desc: '服务器错误'
                    });
                }
            })
        },
        hideScoreIndicatorModal(){
            let self = this;
            this.scoreIndicatorFormShow = false;
        },
        loadScoreIndicatorList(){
            this.$http
            .get(
                "/app/v1/riskTool/scoreCards/"+this.oid+"/scoreIndicators?pageSize=50"
            )
            .then(res => {
                // console.log(res.data.data);
                this.table.data = res.data.data ? res.data.data : [];
                // console.log(this.table.columns);
            });
        },
        loadApplyObject(){
            let self = this;
            self.$http.get('/app/v1/udc/langs/zh_CN/udcCodes/RISK_OBJECT').then(function(resp){
                // console.log(resp);
                self.applyObjectList = resp.data;
            });
        },
        saveScoreCard(){
            let self = this;
            self.saveLoading = true;

            let param = Object.assign({},self.scoreCard);
            param.enable = param.enable?1:0;
            param.enableMessage = param.enableMessage?1:0;
            console.log(param);

            self.$http.post('/app/v1/riskTool/scoreCards',param).then(function(resp){
                console.log(resp);
                self.saveLoading = false;
                if(resp.code === 0){
                    self.$Notice.success({
                        title: '系统提示',
                        desc: resp.desc
                    });
                    self.isSave = true;

                    //oid赋值
                    self.oid = resp.data;
                }else{
                    self.$Notice.error({
                        title: '系统提示',
                        desc: resp.desc
                    });
                }
            });
        },
        edit: function(p) {
            // console.log(p.row);
            let self = this;
            try{
                self.$router.push({
                    path: "/riskTool/scorecard/setting",
                    query: { 
                        pname:  p.row.name,
                        pid: p.row.riskSketchpad.oid 
                    }
                });
            }catch(e){
                console.error(e);
            }
        },
        remove(row) {
            let name = data.row.name;
            // console.log(name);
            this.$Modal.confirm({
                title: "系统提示",
                content: "<p>确认删除“" + name + "”？</p>",
                onOk: () => {
                    this.$Message.success("删除成功!");
                },
                onCancel: () => {
                    this.$Message.info("取消删除");
                }
            });
        }
    },
    mounted() {
        //加载风控对象
        this.loadApplyObject();
    }
};
</script>
